<script setup lang="ts">
import { useUserStore } from '@/stores/user'
import { useRouter, useRoute } from 'vue-router'
import { watch, computed } from 'vue'
import MainLayout from '@/layouts/MainLayout.vue'

const userStore = useUserStore()
const router = useRouter()
const route = useRoute()

// 监听路由变化，处理权限验证
watch(
  () => route.path,
  (newPath) => {
    // 如果是登录页面，不需要验证
    if (newPath === '/login') {
      return
    }

    // 如果没有登录，跳转到登录页
    if (!userStore.isLoggedIn) {
      router.push('/login')
    }
  },
  { immediate: true },
)

const isLoginPage = computed(() => route.path === '/login')
</script>

<template>
  <div class="min-h-screen bg-base-100">
    <MainLayout v-if="!isLoginPage" />
    <router-view v-else />
  </div>
</template>

<style>
:root {
  --primary-gradient: linear-gradient(to right, theme(colors.primary.DEFAULT), theme(colors.secondary.DEFAULT));
}

.page-title {
  @apply text-2xl font-bold bg-gradient-to-r from-primary-700 to-secondary-600 bg-clip-text text-transparent;
}

.section-title {
  @apply text-xl font-semibold text-neutral;
}

.page-container {
  @apply space-y-4;
}

.card-container {
  @apply grid grid-cols-1 lg:grid-cols-3 gap-6;
}

.card-content {
  @apply bg-base-100 rounded-lg shadow-lg p-6;
}

.card-body-custom {
  @apply space-y-4;
}

.form-group {
  @apply grid grid-cols-1 md:grid-cols-2 gap-6;
}

.input-group {
  @apply space-y-2;
}

.input-label {
  @apply font-medium text-neutral;
}

.input-error-text {
  @apply text-sm text-error;
}

.btn-group {
  @apply flex gap-2;
}

.badge {
  @apply px-2 py-1 text-sm rounded-full flex items-center gap-1;
}

.table-container {
  @apply overflow-x-auto rounded-lg border border-base-200;
}

.table-actions {
  @apply flex gap-2;
}

.stats-container {
  @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4;
}

.breadcrumb-container {
  @apply text-sm text-neutral/60 mt-1;
}

.page-transition-enter-active,
.page-transition-leave-active {
  @apply transition-all duration-300 ease-in-out;
}

.page-transition-enter-from,
.page-transition-leave-to {
  @apply opacity-0 translate-y-4;
}

@media (min-width: 768px) {
  .page-container {
    @apply p-8;
  }
}

@media (min-width: 1024px) {
  .page-container {
    @apply p-10;
  }
}
</style>
